import { vipStatusMap } from "../dict";
import { drawerFormState, operateType } from "../store";
export default defineComponent({
  setup(props, { attrs, slots, emit, expose }) {
    const disabled = (operateType?.value ?? operateType) === "view";
    return () => {
      return (
        <>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.baseInfo")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            {(operateType?.value ?? operateType) === "update" ? (
              <a-col span={24}>
                <a-form-item
                  label={$t("table7")}
                  name="level"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 8 }}
                >
                  <i>LV{drawerFormState.level}</i>
                </a-form-item>
              </a-col>
            ) : null}
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                name="icon"
                label={$t("table26")}
                rules={[
                  {
                    required: true,
                    trigger: ["blur"],
                    message: $t("placeholder184"),
                  },
                ]}
              >
                <upload-avatar
                  v-model={drawerFormState.icon}
                  isShowDelete={operateType.value != "view"}
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table24")}
                name="name"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder95"),
                  },
                ]}
              >
                <s-input
                  disabled={disabled}
                  vModel={drawerFormState.name}
                  placeholder={$t("placeholder95")}
                ></s-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.ruleSet")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                label={$t("table34")}
                name="rule"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder101"),
                  },
                ]}
              >
                <i class="mr8  vertical-align-middle">
                  {$t("base.spend") + "USDT" + $t("base.reach")}
                </i>
                <a-input-number
                  disabled={disabled}
                  style="width: 55px"
                  size="small"
                  min={0}
                  vModel:value={drawerFormState.rule}
                />
                <i class="ml8 vertical-align-middle">{$t("base.unit")}</i>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.equitySet")}</s-title>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  disabled={disabled}
                  vModel:checked={drawerFormState.privateClub}
                >
                  {$t("grade6")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade0")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  disabled={disabled}
                  vModel:checked={drawerFormState.privateService}
                >
                  {$t("grade7")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade1")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  disabled={disabled}
                  vModel:checked={drawerFormState.onlineHideFlag}
                >
                  {$t("grade8")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade2")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  disabled={disabled}
                  vModel:checked={drawerFormState.clubHideMemberFlag}
                >
                  {$t("grade9")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade3")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  disabled={disabled}
                  vModel:checked={drawerFormState.hideLocationFlag}
                >
                  {$t("grade10")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade4")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  disabled={disabled}
                  vModel:checked={drawerFormState.bubbleChatFlag}
                >
                  {$t("grade11")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade5")}</i>
              </a-col>
            </a-row>
          </a-row>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.seniorSet")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table31")}
                name="status"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder61"),
                  },
                ]}
              >
                <s-radio-group
                  vModel={drawerFormState.status}
                  options={vipStatusMap}
                  disabled={disabled}
                ></s-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </>
      );
    };
  },
});
